import React, { Component,useState,useEffect } from 'react'
import axios from 'axios'
export default class App extends Component {
    state = {
        type:1
    }

    render() {
        return (
            <div>
                <ul>
                    <li onClick={() => this.setState({ type: 1 })}>正在热映</li>
                    <li onClick={() => this.setState({ type: 2 })}>即将上映</li>
                </ul>
                <FilmsList type={this.state.type}></FilmsList>
            </div>
        )
    }
}

function FilmsList(props){
    const [list,setlsit]=useState([])
    useEffect(()=>{
        if (props.type === 1) {
            console.log("请求卖座正在热映的数据");
            axios({
                url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=807784",
                // url:"https://m.maizuo.com/gateway?cityId=810000&pageNum=1&pageSize=10&type=1&k=2119891",
                headers: {
                'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.list'}
            }).then(res=>{
                console.log(res.data.data.films);
                setlsit(res.data.data.films)
            })
        } else {
            console.log("请求卖座即将上映的数据");
            axios({
                url:"https://m.maizuo.com/gateway?cityId=810000&pageNum=1&pageSize=10&type=2&k=2119891",
                headers: {
                'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.list'}
            }).then(res=>{
                console.log(res.data.data.films);
                setlsit(res.data.data.films)
                
            })
        }
        // 依赖于props.type，使数据可以点击执行，不会重复
    },[props.type])
    return (
        <div>
            <ul>
                {
                    list.map(item=>
                    <li key={item.filmId}>{item.name}</li>    
                    )
                }
            </ul>
        </div>
    )
}



